<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue登录页面--0304190124</title>
    <!-- Bootstrap core CSS -->
    <link href="style.css" rel="stylesheet">
    <style type="text/css">
        span{
            color: skyblue;
        }
</head>

<body>
    <div class="sign-up-from">
        <h1>vue登录系统</h1>
        <form>
            用户名 <input type="email" id="username" class="input-box" placeholder="请输入账号"><span id="nameError"></span>
            密码<input type="password" id="password" class="input-box" placeholder="请输入密码">
            <p><span><input type="checkbox" checked ='checked'></span> 我同意服务条款</p>
           <button type="button" class="signUp-btn" onclick="a()" >登录</button>
            <hr>
            <p>没有账号点击这里<a href="zhuce.html" >注册</a></p>
        </form>
    </div>
    <script type="text/javascript">
        var test = document.getElementById("username");
        var password = document.getElementById("password");
        window.onload=function f() {
            var nameError =document.getElementById("nameError")
            var ele =document.getElementById("username");
            ele.onblur=function () {
            var username=ele.value;
            username=username.trim();
            if (username==""){
                nameError.innerHTML="用户名不能为空"
            }
            }
            ele.onfocus=function () {
            nameError.innerHTML=""
            }
        }

        function a(){
            var aaa=test.value;
            var bbb=password.value;
            if (aaa=="0304190124"&&bbb=="123456"){
                window.open("index.html")
            }
            else {
                alert("错误")
            }
        }

    </script>
</body>
</html>
